<template>
  <n-layout style="margin-top: 20px;" >
<!--    <n-card title="搜索">
        <n-space vertical>
          <n-radio-group v-model:value="searchForm.area" name="area" :theme-overrides="themeOverrides">
            <n-space inline>
              <n-radio-button
                  class="search"
                  v-for="type in areas"
                  :key="type.value"
                  :value="type.value"
                  :label="type.label"
                  size="large"
              />
            </n-space>
          </n-radio-group>

          <n-radio-group v-model:value="searchForm.type" name="types" size="large" :theme-overrides="themeOverrides">
            <n-space inline>
              <n-radio-button
                  v-for="type in types"
                  :key="type.value"
                  :value="type.value"
                  :label="type.label"
                  class="search"
              />
            </n-space>
          </n-radio-group>
        </n-space>
    </n-card>-->
    <n-card class="no_one">
      <n-thing class="tab_thing">
        <template #avatar>
          <SIcon :size="30" icon="icon-yinle4"/>
        </template>
        <template  #header>
          音乐
        </template>
        <template  #header-extra>
          <n-space inline>
            <n-input placeholder="歌手/歌名" v-model:value="keyword" round/>
            <n-button @click="getHotMusic" :focusable="false"  :bordered="false" >
              <SIcon :size="22" icon="icon-icon-test"/>
            </n-button>
          </n-space>
        </template>
      </n-thing>
      <n-grid x-gap="60" :cols="5" item-style="margin-top: 30px">
        <n-gi v-for="item of musicList" :key="item.id"  style="cursor: pointer;position:relative" @click="gotoMusic(item)" @contextmenu="(e)=>handleMusicMenu(e,item)">
          <div class="box-img">
            <n-space class="text">
              <n-button>aaa</n-button>
            </n-space>
            <n-image
                class="img"
                preview-disabled
                :width="140"
                :hidden="140"
                :src="item.picUrl || 'src/assets/img/longjuanfeng.jpg'"
                fallback-src="src/assets/img/longjuanfeng.jpg"
            />
          </div>
          <n-thing description-style="color: #B2B2B2;font-size: 12px"
                   :title="item.musicName"
                   :description="item.singerVo?.name"
                  >
          </n-thing>
        </n-gi>
      </n-grid>
    </n-card>
  </n-layout>
</template>
<script setup name="Singer">

import SIcon from "@/components/public/SIcon.vue";
import {queryMusicList} from "@/api/music/musicApi";
const props = defineProps({
  handleMusicMenu:Function
})
const router = useRouter();
const route = useRoute();
const themeOverrides = {
  buttonBorderRadius: '20px'
}

const keyword = ref()
const musicList = ref([
])
onMounted(()=>{
  console.log("ddd",route.query.keyword)
  if (route.query.keyword && route.query.keyword.length > 0){
    keyword.value = route.query.keyword;
  }
  getHotMusic();
})
function getHotMusic(){
  queryMusicList(1,50,{sortType:'hot',keyword:keyword.value}).then(res=>{
    musicList.value = res.data.records;
  })
}
function gotoMusic(item){
  // 跳转到歌曲详情
  router.push({
    path:`/music/${item.id}`
  })
}
</script>
<style>
.search {
  height: 40px;width: 100px;text-align: center;line-height: 37px;
  border-radius: 20px;
}
.tab_thing{
  border-bottom: 2px solid #C10D0C;

}
.no_one{
  margin-top: 40px;
}
.box-img{
  position: relative;
  width: 140px;
  height: 140px;
}
.box-img .img {
  position: relative;
  width: 140px;
  height: 140px;
  max-width: 100%;
}
.box-img .text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
</style>
